<template>
    <div>
        <Navbar v-show="show"></Navbar>
        <!-- 动态组件 -->
        <component :is="which"></component>
        
    </div>
</template>

<script>
import Navbar from './Navbar.vue';
import List from './List.vue';
import Child from './Child.vue';
import { provide, ref } from 'vue';

const which = ref('List');
const show = ref(true);
export default {
    // provide inject依赖注入在VOA中可以实现跨级通信,但是无法做到响应式,但是在VCA中可以做到真正的响应式跨级通信,不管跨几级可以
    components: {
        Navbar,
        List,
        Child
    },
    setup() {
        const which = ref('List')
        const show = ref(true)
        provide("which", which)
        provide("show", show)
        return {
            which, show,
        }
    }
}
</script>